<!--公告通知-->
<template>
  <div id="noticeCreate" class="app-container">
    <!--新增/编辑侧边栏-->
    <el-form
      ref="dataForm"
      class="flex-main"
      style="overflow: auto;"
      :rules="noticeRules"
      :model="noticeRecord"
      label-position="right">
      <DocEditor
        :form="{
          title:noticeRecord.noticeTitle,
          contnetAbstract:noticeRecord.noticeAbstract,
          content:noticeRecord.noticeContent
        }"
        :catalog="constants.FILE_CATALOG_EXAMPLE"
        :error="errorMsg"
        :show-input="['abstract']"
        @result="handleEditorResult">
        <template slot="bottom">
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="noticeRecord.endTime"
              :picker-options="expireTimeOption"
              value-format="timestamp"
              format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width:100%"
              class="input-no-border"
              placeholder="请选择截至日期" />
          </el-form-item>
          <el-form-item label="接收用户:" prop="noticeCategory">
            <el-radio-group v-model="noticeRecord.noticeCategory">
              <el-radio label="USER">指定用户</el-radio>
              <el-radio label="ALL">全体用户</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="noticeRecord.noticeCategory==='USER'" label="指定用户:" prop="receiver">
            <UserSelector v-model="noticeRecord.receiver" mode="input" :multiple="true" />
          </el-form-item>
          <el-form-item label="优先级:" prop="priority">
            <el-radio-group v-model="noticeRecord.priority">
              <el-radio :label="0">低</el-radio>
              <el-radio :label="1">中</el-radio>
              <el-radio :label="2">高</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template slot="footer">
          <el-button type="primary" plain @click="sideBox.status==='create'?createData():updateData()">发布 </el-button>
          <el-button plain @click="handleGoBack">返回</el-button>
        </template>
        <template slot="desc">
          向下滑动鼠标，还有内容哟！
        </template>
      </DocEditor>

    </el-form>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      expireTimeOption: {
        disabledDate(date) {
          return date.getTime() < Date.now()
        }
      },
      type: this.$route.query.type,
      // 固定写法
      sideBox: {
        title: '',
        status: 'create' // 对话框状态
      },
      errorMsg: null,
      noticeRecord: {
        isSelf: '0'
      },
      noticeRules: {
        endTime: [
          { required: true, message: '请输入截至时间', trigger: 'blur' }
        ],
        receiver: [
          { required: true, message: '请选择指定用户', trigger: 'blur' }
        ],
        noticeContent: [
          { required: true, message: '请填写正文', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
    'this.$route': function(val) {
      this.type = this.$route.query.type
    }
  },
  created() {
    var id = this.$route.query.id
    if (id) {
      this.handleUpdate(id)
    } else {
      this.handleCreate()
    }
  },
  methods: {
    handleEditorResult(val) {
      this.noticeRecord = {
        ...this.noticeRecord,
        noticeTitle: val.title,
        noticeAbstract: val.contnetAbstract,
        noticeContent: val.content
      }
    },
    handleGoBack() {
      this.$router.push({ path: '/upms/system/notice' })
      const view = this.$route
      delete view.icon
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {})
    },
    /* 新增*/
    handleCreate() {
      this.noticeRecord = {
        noticeCategory: 'ALL',
        priority: 2,
        noticeType: this.type
      }
      this.sideBox.status = 'create'
      this.sideBox.title = '新增通知公告'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      if (!this.T.removeHtmltag(this.noticeRecord.noticeTitle)) {
        this.errorMsg = '请填写标题'
        return true
      }
      if (!this.T.removeHtmltag(this.noticeRecord.noticeContent)) {
        this.errorMsg = '请填写正文内容'
        return true
      }
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('noticeSave', this.noticeRecord).then(response => {
            this.msgSuccess('创建成功')
            this.handleGoBack()
          }).catch(() => {
          })
        }
      })
    },

    /* 编辑*/
    handleUpdate(id) {
      this.$store.dispatch('getNoticeById', id).then(res => {
        this.noticeRecord = res // copy obj
        this.sideBox.status = 'update'
        this.sideBox.title = '编辑[' + this.noticeRecord.noticeTitle + ']'
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      }).catch((_) => {
        this.handleGoBack()
      })
    },

    updateData() {
      if (!this.T.removeHtmltag(this.noticeRecord.noticeTitle)) {
        this.errorMsg = '请填写标题'
        return true
      }
      if (!this.T.removeHtmltag(this.noticeRecord.noticeContent)) {
        this.errorMsg = '请填写正文内容'
        return true
      }
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('noticeUpdate', this.noticeRecord).then(response => {
            this.msgSuccess('修改成功')
            this.handleGoBack()
          }).catch(() => {
          })
        }
      })
    },

    handleRemoveSingle(row) {
      this.multipleSelectionRecords = []
      this.multipleSelectionRecords.push(row)
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.removeRecord()
    },
    removeRecord() {
      if (this.multipleSelectionRecords.length > 0) {
        const ids = []
        this.multipleSelectionRecords.forEach(function(v, i) {
          ids.push(v.id)
        })
        this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('noticeRemove', ids).then(response => {
            this.handleReset()
            this.msgSuccess('删除成功')
          }).catch(() => {})
        }).catch(() => { })
      } else {
        this.msgWarning('请选择要删除的记录')
      }
    },

    changeSendStatus(row) {
      var temp = Object.assign({}, row) // copy obj
      this.$confirm('您确定' + (temp.sendStatus === 1 ? '撤销' : '发布') + '[' + temp.noticeTitle + '], 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .then(() => {
          const params = {
            id: temp.id,
            sendStatus: temp.sendStatus === 1 ? 2 : 1
          }
          this.$store.dispatch('noticeChangeSendStatus', params).then(response => {
            this.msgSuccess('修改成功')
            this.handleFilter()
          }).catch(() => {
            row.status = !row.status
          })
        }).catch(() => {
          row.status = !row.status
        })
    }

  }
}
</script>
<style lang="scss">
#noticeCreate{
  background-color: #fff;
}
</style>
